<template>
    <div class="app-container">

        <div class="content">
            <div class="lgm-search">
                <el-form ref="form" :model="searchParams" label-width="80px" class="search-form">
                    <el-form-item label="扫菲日期">
                        <el-date-picker v-model="searchParams.time1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                   
                    <el-row>
                        <el-button type="success" class="lgm-search-btn" icon="el-icon-search" @click="seach">搜索</el-button>
                        <el-button class="lgm-reset-btn" icon="el-icon-refresh" @click="reset">重置</el-button>
                        <!-- <el-button type="success">
                            <el-image :src="require('@/assets/images/export.png')" class="export-icon"></el-image>
                            导出
                        </el-button>
                        <el-button type="info">打印工资条</el-button> -->
                    </el-row>
                </el-form>
            </div>

            <!-- <div class="info">
                <p>总额:2111746</p>
                <p>可结算:0</p>
                <p>待结算:0</p>
                <p>已结算:0</p>
                <p>基本薪资:113</p>
                <p>全勤奖:21321</p>
                <p>奖金:21</p>
                <p>罚款:123</p>
                <p>借款:12</p>
                <p>交通补贴:213</p>
            </div> -->

            <div class="table">
                <el-table :data="dataList" border>
                    <el-table-column prop="nickname" label="名称" align="center"></el-table-column>
                    <el-table-column prop="total_piece" label="总额" align="center" ></el-table-column>
                    <el-table-column prop="already_settled_price" label="已结算费用" align="center" ></el-table-column>
                    <el-table-column prop="unsettled_price" label="待结算费用" align="center" ></el-table-column>
                    <el-table-column prop="settleable_price" label="可结算费用" align="center" ></el-table-column>
                    <el-table-column prop="phone" label="电话" align="center" ></el-table-column>
                    <el-table-column prop="level" label="基本薪资" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.basic_pay"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="全勤奖" align="center" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.full_attendance"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="餐补" align="center" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.meal_allowance"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="奖金" align="center" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.bonuse"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="罚款" align="center" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.fine"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="借款" align="center" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.loan"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="交通餐补" align="center" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.traffic_meal_allowance"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="月份" align="center" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.year_month_time"  @change="iptFn(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    
                </el-table>
            </div>
            <div class="lgm-page-wrap">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
					:page-sizes="[10, 100, 200, 300, 400]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
        </div>
    </div>
</template>

<script>
import {
 
  monthly_wage,
  update_monthly_wage
} from "@/api/admin";

export default {
  name: "StyleManage",
  data() {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      detail: {},
      clothing_categoryAdminList: [],
      styleAdminList: [],
      sizeList: [],
      colorList: [],

      searchParams: {
        time1: "",
      },
      detailForm: {
        type: "1",
        money: "",
        remarks: "",
      },
      rules: {},
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      dataList: [],
      dialogVisible: false,
    };
  },
  mounted() {
    this.monthly_wageFn();
  },
  methods: {
    handleSizeChange(value) {
      this.page_size = value;
      this.monthly_wageFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.monthly_wageFn();
    },
    monthly_wageFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }
      delete obj.time1
      monthly_wage(
        {
          page: this.page,
          page_size: this.page_size,
          ...obj,
        },
        "GET"
      ).then((e) => {
        console.log(e.data.list);
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
    },
   

    seach() {
      this.page = 1;
      this.monthly_wageFn();
    },
    reset() {
      for (let i in this.searchParams) {
        this.searchParams[i] = null;
      }
      this.seach();
    },

    addList() {
      this.detailForm = {
        type: "1",
    money: "",
        remarks: "",
      };
      this.dialogVisible = true;
    },
    iptFn( item) {
        // delete item.year_month_time
        console.log(item)
        update_monthly_wage(
            item,
        "POST",
        item.id
      ).then((e) => {
       
      });
    },
    handleDelete(index, item) {
      this.$confirm("是否确认删除选中的?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "submitDeleteBtn",
        type: "warning",
      }).then(() => {
        monthly_wage({}, "DELETE", item.id).then((e) => {
          this.seach();
        });

        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    colorAdminFn() {
      colorAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.colorList = e.data.list;
      });
    },
    sizeAdminFn() {
      sizeAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.sizeList = e.data.list;
      });
    },
    clothing_categoryAdminFn() {
      clothing_categoryAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.clothing_categoryAdminList = e.data.list;
      });
    },
    styleAdminFn() {
      styleAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.styleAdminList = e.data.list;
      });
    },

    
    clickItem() {
      console.log(456);
    },
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    staticdeliveryFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }
    },
  },
};
</script>


<style lang="scss" scoped>
@import "~@/styles/variables.scss";


.app-container {

    .content {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .info {
        display: flex;
        margin: 20px 0;

        p {
            margin-right: 30px;
        }
    }

    .tips {
        color: #999;
    }

    .table {
        .flex {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;

            ::v-deep button {
                margin: 0;
                margin-bottom: 5px;
            }
        }
    }

}
</style>
